<template>
   <div>
      <div class="flyray-top flyray-top-left">
         <top />
      </div>
      <div class="mainMsgPadding_Pro box main">
         <div>
            <div class="action" style="padding-left:12px">
               <el-button type="primary" icon="el-icon-plus" @click="modalStatus=true" v-if="!tableData">创建token</el-button>
            </div>
            <div>
               <a-row :gutter="24" style="margin-left: 0px;margin-right: 0px;margin-top:20px">
                  <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
                     <chart-card :loading="loading" title="发行总量" :total="tableData.totalSupply">
                        <a-tooltip title="发行总量" slot="action">
                           <a-icon type="info-circle-o" />
                        </a-tooltip>
                        <div>
                           <!-- <trend flag="up" style="margin-right: 16px;">
                              <span slot="term">冻结团队总量</span>
                              {{tableData.freezeTeamAmount}}
                           </trend>
                           <trend flag="down">
                              <span slot="term">冻结社区总量</span>
                              {{tableData.freezeCommunityAmount}}
                           </trend>-->
                           <trend flag="down">
                              <span slot="term">冻结量</span>
                              {{tableData.freezeCommunityAmount}}
                           </trend>
                        </div>
                        <template slot="footer">
                           已释放量
                           <span>{{tableData.communityReleasedAmount + tableData.teamReleasedAmount +tableData.investorReleasedAmount}}</span>
                        </template>
                     </chart-card>
                  </a-col>
                  <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
                     <chart-card :loading="loading" title="社区总量" :total="tableData.communityAmount">
                        <a-tooltip title="社区总量" slot="action">
                           <a-icon type="info-circle-o" />
                        </a-tooltip>
                        <div>
                           <mini-area />
                        </div>
                        <template slot="footer">
                           <trend flag="up" style="margin-right: 16px;">
                              <span slot="term">已释放量</span>
                              {{tableData.communityReleasedAmount}}
                           </trend>
                           <trend flag="down">
                              <span slot="term">社区比例</span>
                              {{tableData.communityRatio* 100 + '%'}}
                           </trend>
                        </template>
                     </chart-card>
                  </a-col>
                  <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
                     <chart-card :loading="loading" title="团队总量" :total="tableData.teamAmount">
                        <a-tooltip title="团队总量" slot="action">
                           <a-icon type="info-circle-o" />
                        </a-tooltip>
                        <div>
                           <mini-bar />
                        </div>
                        <template slot="footer">
                           <trend flag="up" style="margin-right: 16px;">
                              <span slot="term">已释放量</span>
                              {{tableData.teamReleasedAmount}}
                           </trend>
                           <trend flag="down">
                              <span slot="term">团队比例</span>
                              {{tableData.teamRatio * 100 + '%'}}
                           </trend>
                        </template>
                     </chart-card>
                  </a-col>
                  <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
                     <chart-card :loading="loading" title="投资者总量" :total="tableData.investorAmount">
                        <a-tooltip title="投资者总量" slot="action">
                           <a-icon type="info-circle-o" />
                        </a-tooltip>
                        <div>
                           <mini-progress
                              color="rgb(19, 194, 194)"
                              :target="80"
                              :percentage="tableData.communityRatio* 100"
                              height="8px"
                           />
                        </div>
                        <template slot="footer">
                           <trend flag="up" style="margin-right: 16px;">
                              <span slot="term">已释放量</span>
                              {{tableData.investorReleasedAmount}}
                           </trend>
                           <trend flag="down">
                              <span slot="term">投资比例</span>
                              {{tableData.investorRatio* 100 + '%'}}
                           </trend>
                        </template>
                     </chart-card>
                  </a-col>
               </a-row>
            </div>
         </div>
         <flowingWater />
      </div>

      <a-modal
         destroyOnClose
         :width="screen ==3 ?'50%':'70%'"
         v-model="modalStatus"
         title="创建token"
      >
         <el-form ref="ruleForm" :model="ruleForm" :rules="rules">
            <el-row :gutter="10">
               <!-- <el-col :xs="24" :sm="12">
                  <el-form-item label="会员姓名" prop="memberId" :label-width="formLabelWidth">
                     <el-select
                        v-model="ruleForm.memberId"
                        filterable
                        placeholder="请选择"
                        style="width:100%"
                     >
                        <el-option
                           v-for="item in huiyuanList"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value"
                        ></el-option>
                     </el-select>
                  </el-form-item>
               </el-col>-->
               <el-col :xs="24" :sm="12">
                  <el-form-item label="token总量(个)" prop="totalSupply" :label-width="formLabelWidth">
                     <el-input v-model="ruleForm.totalSupply">
                        <template slot="append">个</template>
                     </el-input>
                  </el-form-item>
               </el-col>
               <el-col :xs="24" :sm="12">
                  <el-form-item label="社区比例(%)" prop="communityRatio" :label-width="formLabelWidth">
                     <el-input-number
                        v-model="ruleForm.communityRatio"
                        :min="0"
                        :max="100"
                        :step="2"
                        style="width:100%"
                     ></el-input-number>
                  </el-form-item>
               </el-col>
               <el-col :xs="24" :sm="12">
                  <el-form-item label="投资比例(%)" prop="investorRatio" :label-width="formLabelWidth">
                     <el-input-number
                        v-model="ruleForm.investorRatio"
                        :min="0"
                        :max="100"
                        :step="2"
                        style="width:100%"
                     ></el-input-number>
                  </el-form-item>
               </el-col>
               <el-col :xs="24" :sm="12">
                  <el-form-item label="团队比例(%)" prop="teamRatio" :label-width="formLabelWidth">
                     <el-input-number
                        v-model="ruleForm.teamRatio"
                        :min="0"
                        :max="100"
                        :step="2"
                        style="width:100%"
                     ></el-input-number>
                  </el-form-item>
               </el-col>
               <el-col :xs="24" :sm="12">
                  <el-form-item label="备注" prop="remark" :label-width="formLabelWidth">
                     <a-input v-model="ruleForm.remark" />
                  </el-form-item>
               </el-col>
            </el-row>
         </el-form>
         <div slot="footer" class="dialog-footer">
            <el-button
               type="primary"
               @click="submitForm('ruleForm')"
               :loading="confirmLoading"
            >完成并创建</el-button>
            <el-button @click="modalStatus = false">取 消</el-button>
         </div>
      </a-modal>
   </div>
</template>

<script>
import top from "@/components/top/";
import Trend from "@/components/Trend";
import ChartCard from "@/components/Charts/ChartCard";
import MiniArea from "@/components/Charts/MiniArea";
import MiniBar from "@/components/Charts/MiniBar";
import MiniProgress from "@/components/Charts/MiniProgress";
import RankList from "@/components/Charts/RankList";
import MiniSmoothArea from "@/components/Charts/MiniSmoothArea";
import Bar from "@/components/Charts/Bar";
import NumberInfo from "@/components/NumberInfo";
import flowingWater from "./flowingWater.vue";
import { addObj, tokenInfo, journal, getMember } from "@/api/org/token";
import { mapGetters } from "vuex";

export default {
   name: "Token",
   computed: {
      ...mapGetters(["screen"])
   },
   components: {
      top,
      ChartCard,
      Trend,
      MiniArea,
      MiniBar,
      MiniProgress,
      RankList,
      Bar,
      NumberInfo,
      MiniSmoothArea,
      flowingWater
   },
   data() {
      return {
         ruleForm: {},
         modalStatus: false,
         confirmLoading: false,
         loading: false,
         rules: {},
         huiyuanList: [],
         tableData: {},
         formLabelWidth: "120px"
      };
   },
   created() {
      this.getList();
      this.getMemberObj();
   },
   destroyed() {},
   mounted() {},
   methods: {
      getMemberObj() {
         getMember({ orgId: this.$store.getters.userInfo.ecoUserNo }).then(
            res => {
               this.huiyuanList = res.data.data.records.map(item => {
                  return {
                     value: item.memberId + "",
                     label: item.realName + "-" + item.phone,
                     orgId: item.orgId
                  };
               });
            }
         );
      },
      getList() {
         this.tableLoading = true;
         tokenInfo({ orgId: this.$store.getters.userInfo.ecoUserNo })
            .then(response => {
               this.tableData = response.data.data;
               this.tableLoading = false;
            })
            .catch(() => {
               this.tableLoading = false;
            });
      },
      submitForm(formName) {
         this.ruleForm.orgId = this.$store.getters.userInfo.ecoUserNo;
         this.$refs[formName].validate(valid => {
            if (valid) {
               addObj(this.ruleForm).then(res => {
                  this.confirmLoading = false;
                  this.modalStatus = false;
                  this.getList();
               });
            } else {
               console.log("error submit!!");
               return false;
            }
         });
      },
      resetForm(formName) {
         this.$refs[formName].resetFields();
      }
   }
};
</script>
<style scoped>
.mainMsgPadding_Pro {
   margin: 10px;
   margin-left: 120px;
   padding-left: 20px;
}
.time {
   font-size: 13px;
   color: #999;
}

.bottom {
   margin-top: 13px;
   line-height: 12px;
}

.button {
   padding: 0;
   float: right;
}

.image {
   width: 100%;
   display: block;
}

.clearfix:before,
.clearfix:after {
   display: table;
   content: "";
}

.clearfix:after {
   clear: both;
}
</style>
